<template>
	<view>
		<view class="top">
			<view style="color: #9A9A9A;font-size: 26rpx;">账户总额(元)</view>
			<view class="total">{{totalAmount || 0.00  | toFixed2}}</view>
		</view>
		<view class="bar"></view>
		<view class="list">
			<block v-for="(item,index) in operatorList" :key="index">
				<view class="item u-f-jsb">
					<view class="item-content">
						<view class="name u-f-jsb">
							<text>{{item.operName}}</text>
							<!-- <view class="btn" >
								<text style="margin-right: 10rpx;">账单流水</text>
								<u-icon name="play-right-fill" color="#0DC887" size="20"></u-icon>
							</view> -->
						</view>
						<view class="info u-f-jsb">
							<view class="balance u-f-ac">可用余额：<text class="num">¥{{item.userBalance || '0.00'}}</text></view>
							<!-- <view class="btn" @tap="$navigateTo(`./balance?operaId=${item.operaId}&operName=${item.operName}`)">余额流水</view> -->
						</view>
						<!-- <view class="site u-f-ac" >
							<text style="margin-right: 10rpx;">可用站点</text>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view> -->
					</view>
					<view class="btn-charge" >
						<view class="btn2" @tap="$navigateTo(`/pagesUc/user-account/cardAdd`)">绑定加注卡</view>
						<view class="line" ></view>
						<view class="btn1" v-if="isAndroid" @tap="$navigateTo('./recharge?operaId=' + item.operaId)">优惠充值</view>
						<!-- <view class="btn1" v-else>其他优惠</view> --> 
					</view>
					<view style="width: 2rpx;"></view>
					<view class="btn-charge" >
						<view class="btn1" @tap="$navigateTo(`./balance?operaId=${item.operaId}&operName=${item.operName}`)">账单流水</view>
						<view class="line" ></view>
						<view class="btn2" @tap="$navigateTo(`../site/busi?operaId=${item.operaId}&onSite=true`)">可用站点</view>
					</view>
					
				</view>
			</block>
		</view>
		<!-- 没有运营商列表时 -->
		<view class="no_lists ope" v-if="operatorList.length === 0">
			<view class="img"></view>
			<text class="tip">暂无数据</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isAndroid:false, // 是否是安卓
			totalAmount:'' ,// 账户总额，
			operatorList:[
				// {operName:'蓝蜘蛛运营商',userBalance:'12200.00',},
				// {operName:'蓝蜘蛛运营商',userBalance:'12200.00',},
				// {operName:'蓝蜘蛛运营商',userBalance:'12200.00',}
			] // 运营商列表
		};
	},
	onLoad() {
		this.isAndroid = this.$isAndroid();
		this.getList();
		uni.$on('chargeSuccess',()=>{
			this.getList();
		});
	},
	onUnload() {
		uni.$off('chargeSuccess');
	},
	methods:{
		//获取运营商列表
		getList() {
			this.$http({
				url: this.$api.userUrl + 'getoperatorlistbyuser'
			}).then(res => {
				this.totalAmount = res.accountAmount;
				this.operatorList = res.lstOperators;
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #F5F5F9;
}
view {
	box-sizing: border-box;
}
.top {
	font-size: 28rpx;
	color: #999999;
	padding: 40rpx 60rpx;
	background-color: #FFFFFF;
	.total {
		color: 000;
		font-size: 56rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}
}

.bar {
	width: 100vw;
	height: 8rpx;
	background-color: #E6E6E6;
}

.list {
	padding:0 20rpx;
	margin-top: 20rpx;
	.item {
		width: 710rpx;
		height: 180rpx;
		position: relative;
		box-shadow:0px 7rpx 11rpx 0px rgba(164, 171, 164, 0.35);
		border-radius:16rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		
		.item-content {
			width: 300rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			flex: 1;
			overflow: hidden;
			padding: 30rpx 0 14rpx 34rpx;
		}
		.name {
			font-weight: 500;
			font-size: 32rpx;
			>text {
				font-size: 36rpx;
				color: #333333;
				font-weight: 600;
			}
			.btn {
				background-color: #F5F5F5;
				border-radius: 10rpx;
				width: 148rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				font-size: 24rpx;
				color: #0DC887;
				margin-right: 40rpx;
			}
		}
		.info {
			width: 540rpx;
			
			.balance{
				color: #9A9A9A !important;
				font-size: 28rpx;
				
				.num {
					color: #0DC887;
					font-size: 30rpx;
				}
			}
			.btn {
				border: 1rpx solid #FD9C10;
				border-radius: 50rpx;
				color: #FD9C10;
				display: flex;
				justify-content: center;
				padding: 8rpx 20rpx;
			}
		}
		
		.site {
			color: #999999;
			font-size: 24rpx;
		}
		.btn-charge {
			width: 170rpx;
			height: 100%;
			flex-shrink: 0;
			color: #FFFFFF;
			border-radius: 6rpx;
			// &.b-l {
			// 	border-radius: ;
			// }
			
			.btn1,.btn2 {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
			}
			.btn1 {
				background-color: #0DC887;
				color: #FFFFFF;
			}
			.line {
				background-color: #FFFFFF;
				height: 2rpx;
			}
			.btn2 {
				background-color: #0DC887;
				color: #FFFFFF;
			}
		}
	}
}

.no_lists.card .img {
		width: 585rpx;
		height: 308rpx;
		margin-top: 440rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BswaAPhfzAAEI7HumAOg477.png');
	}
	
	/* 没有运营商列表时 */
	.no_lists.ope {
		position: fixed;
		top: 200rpx;
		bottom: 0;
		z-index: $z-index-popup-info;
		background-color: $color-bg;
		.img {
			width: 750rpx;
			height: 396rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky159cFSAOWX2AAGEHrkZsIo116.png');
		}
	}
</style>
